<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>MglUI-网格</title>
    <meta name="keywords" content="不锈钢,钢铁,电商">
    <meta name="description" content="江苏东方不锈钢找货助手">

    <!-- MglUI core CSS -->
    <link href="./assets/css/mgui.css" rel="stylesheet" charset="utf-8">
    <link href="./assets/css/style.css" rel="stylesheet" charset="utf-8">
    <link href="./assets/lib/artdialog/ui-dialog.css" rel="stylesheet" charset="utf-8">

    <!-- HTML5shiv 和 Respond.js IE8支持HTML5 tooltipss和媒体查询 -->
    <!--[if lt IE 9]>
        <script src="./assets/js/html5shiv.js"></script>
        <script src="./assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <section id="container">
        <!--header start-->
        <header class="ui-header ui-header-positive clearfix">
            <div class="ui-col ui-col-20"><h2 class="logo" onclick="window.location.href='/'">CRM管理系统</h2></div>
            <div class="ui-col ui-col-60">
                <ul class="header-nav-sys">
                    <li class="active"><i class="ico-crm-sprite ico-crm-sys"></i>CRM</li>
                </ul>
            </div>
            <div class="ui-col ui-col-20">
                <ul class="top-menu pull-right">
                    <li>
                        <a class="menu-down" href="javascript:;"><i class="icon-people"></i>186******75</a>
                        <div class="dropdown-menu">
                            <a href="/">退出</a>
                            <a href="/">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <!--header end-->

                <!--sidebar start-->
        <div class="ui-sidebar ui-sidebar-positive" id="sidebar-menu">
            <div class="sidebar-toggle"><i class="icon-sanshuxian"></i></div>
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li>
                    <a href="index.html">
                        <i class="icon-home1"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a class="ui-arrowadd" href="javascript:;">
                        <i class="icon-photogallery"></i>
                        <span>UI元素</span>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="general.html"><i class="icon-mac"></i><span>常规</span></a></li>
                        <li><a href="button.html"><i class="icon-sort"></i><span>按钮</span></a></li>
                        <li><a href="tabs.html"><i class="icon-keyboard"></i><span>Tab</span></a></li>
                        <li><a href="iconfont.html"><i class="icon-love"></i><span>字体图标</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="ui-arrowadd" href="javascript:;">
                        <i class="icon-iconxuexisel"></i>
                        <span>组件</span>
                    </a>
                    <ul class="sub-menu">
                        <li><a class="active" href="grids.html"><i class="icon-list1"></i><span>网格</span></a></li>
                        <li><a href="calendar.html"><i class="icon-carlendar"></i><span>日历</span></a></li>
                        <li><a href="charts.html"><i class="icon-booking"></i><span>图表</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="ui-arrowadd" href="javascript:;">
                        <i class="icon-bill"></i>
                        <span>表单</span>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="form-component.html"><i class="icon-creditcard"></i><span>表单组件</span></a></li>
                        <li><a href="form-validator.html"><i class="icon-coupon"></i><span>表单验证</span></a></li>
                        <li><a href="form-wizard.html"><i class="icon-coupon"></i><span>表单向导</span></a></li>
                    </ul>
                </li>
                <li>
                    <a href="table.html">
                        <i class="icon-carlendar"></i>
                        <span>表格</span>
                    </a>
                </li>
                <li>
                    <a href="mail.html">
                        <i class="icon-mail1"></i>
                        <span>邮件</span>
                        <span class="ui-badge bg-important">2</span>
                    </a>
                </li>
                <li>
                    <a href="login.html">
                        <i class="icon-user"></i>
                        <span>登录页</span>
                    </a>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
        <!--sidebar end-->

        <section class="main-content">
            <section class="wrapper">
                <div class="ui-row">
                    <div class="ui-col ui-pw15">
                        <p class="ui-mb10">等分布局</p>
                    </div>
                </div>
                <div class="ui-row">
                    <div class="ui-col ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-50 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-50</div>
                    </div>
                    <div class="ui-col ui-col-50 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-50</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-33 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-33</div>
                    </div>
                    <div class="ui-col ui-col-33 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-33</div>
                    </div>
                    <div class="ui-col ui-col-33 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-33</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-pw15">
                        <p class="ui-mb10">非等分布局组合</p>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-10 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-10</div>
                    </div>
                    <div class="ui-col ui-col-90 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-90</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-80 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-80</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                    <div class="ui-col ui-col-75 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-75</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-33 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-33</div>
                    </div>
                    <div class="ui-col ui-col-67 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-67</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-40 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-40</div>
                    </div>
                    <div class="ui-col ui-col-60 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-60</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-20 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-20</div>
                    </div>
                    <div class="ui-col ui-col-60 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-60</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                    <div class="ui-col ui-col-25 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-25</div>
                    </div>
                    <div class="ui-col ui-col-50 ui-pw15">
                        <div class="ui-panel ui-pwh15">ui-col-50</div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-pw15">
                        <p class="ui-mb10">flex布局(css3)</p>
                    </div>
                </div>

                <div class="ui-row ui-row-flex">
                    <div class="ui-col ui-col-2 ui-pw15">
                        <div class="ui-panel ui-pwh15">1/2</div>
                    </div>
                    <div class="ui-col ui-col-2 ui-pw15">
                        <div class="ui-panel ui-pwh15">1/2</div>
                    </div>
                </div>

                <div class="ui-row ui-row-flex">
                    <div class="ui-col ui-col-2 ui-pw15">
                        <div class="ui-panel ui-pwh15">2/3</div>
                    </div>
                    <div class="ui-col ui-pw15">
                        <div class="ui-panel ui-pwh15">1/3</div>
                    </div>
                </div>

                <div class="ui-row ui-row-flex">
                    <div class="ui-col ui-col-3 ui-pw15">
                        <div class="ui-panel ui-pwh15">3/4</div>
                    </div>
                    <div class="ui-col ui-pw15">
                        <div class="ui-panel ui-pwh15">1/4</div>
                    </div>
                </div>

                <div class="ui-row ui-row-flex">
                    <div class="ui-col ui-col-4 ui-pw15">
                        <div class="ui-panel ui-pwh15">4/5</div>
                    </div>
                    <div class="ui-col ui-pw15">
                        <div class="ui-panel ui-pwh15">1/5</div>
                    </div>
                </div>

                <div class="ui-row ui-row-flex">
                    <div class="ui-col ui-col-3 ui-pw15">
                        <div class="ui-panel ui-pwh15">3/5</div>
                    </div>
                    <div class="ui-col ui-col-2 ui-pw15">
                        <div class="ui-panel ui-pwh15">2/5</div>
                    </div>
                </div>
            </section>
        </section>

    </section>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./assets/lib/artdialog/dialog.js"></script>
<script src="./assets/js/mgui.js"></script>

</html>
